<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Hello H5+</title>
			<script src="../../js/app/H5plus.js"></script>
				<script type="text/javascript">
			</script>
			<link rel="stylesheet" href="../../css/mui.min.css">
			<script src="../../js/mui.min.js"></script>
			<script>
				    (function(doc, win) {
				        var html = doc.getElementsByTagName("html")[0],
				        // orientationchange->手机屏幕转屏事件
				        // resize->页面大小改变事件(一边pc端有用)
				            reEvt = "orientationchange" in win ? "orientationchange" : "resize",
				            reFontSize = function() {
				                var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
				                if(!clientW) {
				                    return;
				                }
				                html.style.fontSize = 100 * (clientW / 420) + "px";
				        }
				        win.addEventListener(reEvt, reFontSize);
				
				        // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
				        doc.addEventListener("DOMContentLoaded", reFontSize);
				    })(document, window);
			</script>
		<style type="text/css">
			* {
				-webkit-user-select: none;
				-ms-touch-select: none;
				padding: 0rem;
				margin: 0rem;
			 touch-action: pan-y; 
			}
        
		.mui-content{
				background: #FFFFFF !important;
			height: 100vh;
			/* padding: 0.1rem 0.2rem; */
		}
			.mui-icon-closeempty{
			  font-size: 0.5rem;
			  position: absolute;
			  right: 0px;
			  z-index: 11;
			  color: #47BAFE;
			  top: 0px;
			}
			.mui-slider{
				height: 100%;
				padding: 5px 0px;
				}
				.mui-indicator{
					background: black;
					height: 0.12rem !important;
					width: 0.12rem !important;
				}
				.mui-slider-indicator .mui-active{
					background-color: #47BAFE !important;
					border-color: #47BAFE !important;
					    box-shadow: none !important;
				}
				.mui-slider-indicator .mui-indicator {
					  box-shadow: none !important;
				}
				h4{
					color: #47BAFE;
					margin-bottom: 0.1rem;
				}
				.mui-slider-item .img{
					width: 100% !important;
					height:calc(100vh - 1.9rem);
					background-size: auto  100% !important;
					background-repeat: no-repeat;
					background-position-x: center;
				}
				
			.mui-slider-item .img1{
				background-image: url("../../images/reminder/import1.png");
			}
				.mui-slider-item .img2{
				background-image: url("../../images/reminder/import2.png") ;
			}
				.mui-slider-item .img3{
				background-image: url("../../images/reminder/import3.png")  ;
			}
				.mui-slider-item .img4{
				background-image: url("../../images/reminder/import4.png") ;
			}
			.mui-slider-item{
				padding: 0.1rem 0.2rem;
			}
				.mui-slider-item p{
					margin-top: 0.05rem;
					padding: 0.05rem;
					font-size: 0.17rem;
					height: 0.3rem;
					color: #545454;
					line-height: 0.24rem;
				}
				hr{
					height: 1px;
				  background-color: #47BAFE;
				  border: none;
				  margin-bottom: 0.05rem;
		
				}
		</style>
	</head>
	<body >
		<div class="mui-content" style="position: relative;">
				<div class="mui-icon mui-icon-closeempty " onclick="back()"></div>
			<div class="mui-slider" >

			  <div class="mui-slider-group" >
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				   <h4>1.辅助功能设置</h4>
				  <hr>
				<div class="img1 img"> 
					
				</div>
				  <p>当数据诊断辅助功能未启用时，将弹窗提示开启服务。选择「是」，将跳转无障碍服务页面。</p>
				</div>
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				    <h4>2.找到灵豹APP</h4>
					<hr>
					<div class="img img2"> 
					</div>
					
					  <p>在无障碍应用列表中，查找「灵豹保险专家」，点击进入无障碍服务设置界面</p>
				</div>
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				    <h4>3.授权访问</h4>
					<hr>
					<div class="img img3"> 
					</div>
					  <p>点击开关按钮，允许进行自动数据诊断。<b style="font-size: 0.16rem;">注：诊断的数据仅在为您提供销售决策时使用，不会对任何第三方泄漏</b></p>
				</div>
					<div class="mui-slider-item">
				  <!-- 具体内容 -->
				    <h4>4.自动诊断</h4>
					<hr>
					<div class="img img4"> 
					</div>
					  <p>APP开始自动诊断朋友圈数据。诊断过程中将自动进行页面跳转，请暂时不要操作手机。</p>
				</div>
				
			  </div>
			     <div class="mui-slider-indicator">  
                <div class="mui-indicator mui-active"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
            </div>  
			</div>
		</div>
		<script>
	
		</script>
	</body>
</html>